<!--
* @author wn
* @date 2022/08/16 11:05:41
* @description: 提交订单页面
* 购物车选中状态的 后台有记录  调用接口  直接拿 生成订单 数据
* !!!!!!!!!提交订单后  会 清除购物车订单商品  这里要有vuex操作 同步数据
!-->
<template>
	<div class="check-out container">
		<!-- 面包屑 -->
		<xtx-bread>
			<xtx-bread-item to="/">首页</xtx-bread-item>
			<xtx-bread-item to="/cart">购物车</xtx-bread-item
			><xtx-bread-item>填写订单</xtx-bread-item>
		</xtx-bread>
		<section class="wrapper" v-if="checkOutInfo">
			<!-- 收货地址 checkOutInfo.userAddresses-->
			<h3>收货地址</h3>
			<check-out-address
				:addressList="checkOutInfo.userAddresses"
				@changeAddress="changeAddress"
			/>
			<!-- 商品信息 -->
			<h3>商品信息</h3>
			<table>
				<thead>
					<tr>
						<th width="520">商品信息</th>
						<th width="170">单价</th>
						<th width="170">数量</th>
						<th width="170">小计</th>
						<th width="170">实付</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="good in checkOutInfo.goods" :key="good.id">
						<td>
							<a href="javascript:;" class="good">
								<img v-lazy="good.picture" alt="" />
								<div>
									<p class="ellipsis">{{ good.name }}</p>
									<p class="ellipsis">{{ good.attrsText }}</p>
								</div>
							</a>
						</td>
						<td>
							<p>&yen;{{ good.payPrice }}</p>
						</td>
						<td>{{ good.count }}</td>
						<td>
							<p>&yen;{{ good.totalPrice }}</p>
						</td>
						<td>
							<p>&yen;{{ good.totalPayPrice }}</p>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- 配送时间 -->
			<h3>配送时间</h3>
			<div class="delivery-time">
				<xtx-button
					size="large"
					:class="{ active: form.deliveryTimeType === 1 }"
					@click="form.deliveryTimeType = 1"
				>
					不限送货时间:周一至周日
				</xtx-button>
				<xtx-button
					size="large"
					:class="{ active: form.deliveryTimeType === 2 }"
					@click="form.deliveryTimeType = 2"
				>
					工作日送货:周一至周五
				</xtx-button>
				<xtx-button
					size="large"
					:class="{ active: form.deliveryTimeType === 3 }"
					@click="form.deliveryTimeType = 3"
				>
					双休日、假日送货:周六至周日
				</xtx-button>
			</div>
			<!-- 支付方式 -->
			<h3>支付方式</h3>
			<div class="pay-way">
				<xtx-button size="large" class="active">在线支付</xtx-button>
				<xtx-button size="large">货到付款</xtx-button>
				<xtx-button size="large">货到付款需付5元手续费</xtx-button>
			</div>
			<!-- 金额明细 -->
			<h3>金额明细</h3>
			<div class="amount-detail">
				<dl>
					<dt>商品件数:</dt>
					<dd>{{ checkOutInfo.summary.goodsCount }}件</dd>
				</dl>
				<dl>
					<dl>商品总价:</dl>
					<dd>&yen;{{ checkOutInfo.summary.totalPrice }}</dd>
				</dl>
				<dl>
					<dl>运<i></i>费:</dl>
					<dd>&yen;{{ checkOutInfo.summary.postFee }}</dd>
				</dl>
				<dl>
					<dt>折<i></i>扣:</dt>
					<dd>¥{{ checkOutInfo.summary.discountPrice }}</dd>
				</dl>
				<dl>
					<dl>应付金额:</dl>
					<dd class="amount">&yen;{{ checkOutInfo.summary.totalPayPrice }}</dd>
				</dl>
			</div>
			<!-- 提交订单 -->
			<div class="submit">
				<xtx-button type="primary" @click="submit">提交订单</xtx-button>
			</div>
		</section>
	</div>
</template>
<script>
import CheckOutAddress from './components/CheckOutAddress'
import {
	findAddress,
	findCheckOutInfo,
	repurchaseOrder,
	submitOrder,
} from '@/network/order'
import { provide, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Message from '@/components/library/message'

export default {
	name: 'CheckOut',
	components: { CheckOutAddress },
	setup() {
		const checkOutInfo = ref(null)
		// 生成订单API  分为 购物车进入  和  订单中心 再次购买 携带 orderId
		const route = useRoute()
		if (route.query.orderId) {
			repurchaseOrder(route.query.orderId).then(({ result }) => {
				checkOutInfo.value = result
				// 组装 form
				form.goods = result.goods.map(({ skuId, count }) => ({ skuId, count }))
			})
		} else {
			findCheckOutInfo().then(({ result }) => {
				checkOutInfo.value = result
				// 组装 form
				form.goods = result.goods.map(({ skuId, count }) => ({ skuId, count }))
			})
		}
		// 获取收货地址列表
		const getAddressList = async () => {
			const { result } = await findAddress()
			checkOutInfo.value.userAddresses = result
		}
		// 向 AddressEdit  注入 获取地址列表的 函数
		provide('getAddressList', getAddressList)
		const router = useRouter()
		// 获取 地址 id
		const changeAddress = id => {
			form.addressId = id
		}
		// 提交订单所需的数据
		const form = reactive({
			goods: [],
			addressId: '', // 没有地址时 不会emit id会为空
			deliveryTimeType: 1,
			payType: 1,
			payChannel: 1,
			buyerMessage: '买家留言',
		})
		// 提交订单
		const submit = async () => {
			if (!form.addressId) {
				return Message({ type: 'warn', message: '请选择收货地址' })
			}
			const { result } = await submitOrder(form)
			// API 成功  跳转支付 页面  get 携带 订单id
			const orderId = result.id
			router.push(`/member/pay?orderId=${orderId}`)
		}
		return { checkOutInfo, changeAddress, submit, form }
	},
}
</script>
<style scoped lang="less">
.wrapper {
	background-color: #fff;
	padding: 0 20px;
	margin-bottom: 20px;
	h3 {
		font-weight: 500;
		font-size: 16px;
		padding: 25px 5px;
		border-bottom: 1px solid #f5f5f5;
	}
	// 商品信息
	table {
		// 设置相邻单元格的边框间的距离
		border-spacing: 0;
		// 相邻边被合并
		border-collapse: collapse;
		line-height: 24px;
		// border: 1px solid #f5f5f5;
		margin: 20px 0;
		th,
		td {
			padding: 20px;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			&:first-child {
				border-left: 1px solid #f5f5f5;
			}
			&:last-child {
				border-right: 1px solid #f5f5f5;
			}
		}
		th {
			font-weight: normal;
			background-color: #f5f5f5;
		}
		.good {
			display: flex;
			align-items: center;
			text-align: left;
			img {
				width: 70px;
				height: 70px;
				border: 1px solid #f5f5f5;
			}
			> div {
				margin-left: 20px;
				& P:last-child {
					color: #999;
				}
			}
		}
	}
	// 配送时间
	.delivery-time,
	.pay-way {
		margin: 20px 0;
		color: #666666;
		& > * {
			margin-right: 25px;
			&.active,
			&:hover {
				border-color: @xtxColor;
			}
		}
	}
	// 支付方式
	.pay-way {
		> :nth-child(2) {
			margin-right: 10px;
		}
		> :last-child {
			border: none;
			text-align: left;
		}
	}
	// 金额明细
	.amount-detail {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		padding: 20px;
		border-bottom: 1px solid #f5f5f5;
		> dl {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 300px;
			height: 50px;
			i {
				display: inline-block;
				width: 2em;
			}
			> dd {
				padding-right: 30px;
				&.amount {
					font-size: 20px;
					color: @priceColor;
				}
			}
		}
	}
	// 提交订单
	.submit {
		text-align: right;
		padding: 60px;
	}
}
</style>
